<template>
  <div class="view-searchstaff" @click="warpClick" v-clickoutside="warpClick">
    <div class="select-list">
      <span v-for="(item,index) in selectList" :key="index" class="select-row">
        {{item.userName}}
        <i @click.stop="delSelect(item)"><Icon  class="del-icon" type="close-round" size="13"></Icon></i>
      </span>
    </div>
    <Tooltip content="添加" placement="top" v-show="!modalShow.isShow">
      <i @click.stop="showSearch"><Icon class="icon" type="ios-plus-outline" size="25"></Icon></i>
    </Tooltip>
    <div class="userSelectBox" v-show="modalShow.isShow &&isinput" @click.stop="noclick">
      <Input style="width:260px;" @on-change.stop="search" v-model="searchParam" placeholder="输入员工姓名或工号" @on-blur="blur"></Input>
      <div v-if="isdropdownlist" class="down">
        <ul>
          <li v-for="(item,index) in dropDownList" :key="index"><a class="drop-item" :class="{'item-selected':item.isSelected}" @click="select(item)">{{item.userName}}<i>({{item.workNo}})</i></a></li>
          <li v-if="dropDownList.length<1" class="drop-item">暂无搜索结果</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>

import Rest from '@/rest'
import Api from '@/api'
import Helper from '@/common/helper'
//import Bus from '@/store/bus'
import consts from '@/utils/consts'
import clickoutside from '@/components/iview/directives/clickoutside';

export default {
  components: {
  },
  data() {
    return {
      caseId: "",
      searchApi: "",
			caseId:-1,
			isinput:false,
			checklength:true,
			isdropdownlist:true,
			restime:'',//获取入场时间
      searchParam: "",
      modalShow: {
        isShow: false,
      },
      dropDownList: [],
      selectList: [],
      workNode:'',
    }
  },
// 	props: {
// 		businessUnitId:{
// 			type:Number
// 		}
// 	},
  directives: {
    clickoutside
  },
  methods: {
    init(caseId) {
      var that = this;
      that.modalShow.isShow = false;
			that.caseId=caseId;
      that.dropDownList = [];
      that.selectList = [];
      that.searchParam = "";
    },
    showSearch(){
      var that = this;
			that.isinput=true;
      that.modalShow.isShow = true;
    },
    blur(){
      var that = this;
      // that.!modalShow.isShow = true;
      // that.modalShow.isShow = false;
    },
    // 查询
    search() {
      var that = this;
			that.isdropdownlist=true;
      that.getData(that.searchParam);
    },
    // 根据输入内容，获取下拉列表
    getData(){
      var that = this;
      that.searchApi = Api.organisers.baseUsers;
      var param = {}
      if (that.searchParam) {
        param = {
          searchString: that.searchParam,
          belongTo: 1,
          caseId: that.caseId
        }
      } else {
        
      }
      Rest.get(that.searchApi, param).done(function(res) {
        if (res.status.code == 0) {
          that.dropDownList = res.data.items;
          for(var i = that.dropDownList.length ; i-- ;){
            that.dropDownList[i].isSelected = false;
          }
        }
      });
    },
    // 111111
    select(item){
      var that = this;
			that.selectList=[];
      item.isSelected = !item.isSelected;
      if(item.isSelected){
        that.selectList.push(item);
				if(that.selectList.length>0){
					that.isdropdownlist=false;
					that.checklength=false;
					that.isinput=false;
          that.getComtime(that.selectList[0].workNo);
          that.workNode=that.selectList[0].workNo;
          that.$emit("selectStaff", '',that.restime,that.workNode);
        }
      }else{
        for(var i = that.selectList.length ; i-- ;){
          if(that.selectList[i].userId == item.userId){
            that.selectList.splice(i,1);
          }
        }
				if(that.selectList.length<1){
					that.checklength=true;
					that.restime="";
				}
				that.$emit("selectStaff", '',that.restime,'');
      }
//       var teamUsers = [];
//       for(var i = that.selectList.length ; i--;){
//         teamUsers.push(that.selectList[i].userId);
//       }
// 			console.log('user',teamUsers)
//       that.$emit("selectStaff", teamUsers,that.restime);
    },
		// 根据选中人员获取入场时间
		getComtime(worknumber){
			var that = this;
			var baseUserscome = Api.organisers.baseUserscome;
			var param = {
				caseId:that.caseId,
				workNo:worknumber
			}
			
			Rest.get(baseUserscome, param).done(function(res) {
				if (res.status.code == 0) {
					if(res.data){
						that.restime=res.data;
					}else{
						that.restime="";
					}
					that.$emit("selectStaff", that.selectList[0].userId,that.restime,that.workNode);
				}else{
					that.$emit("selectStaff", that.selectList[0].userId,that.restime,that.workNode);
				}
			});
		},
    delSelect(item){
      var that = this;
      that.select(item);
    },
    noclick(){},
    warpClick(){
      var that = this;
      that.modalShow.isShow = false;
    }
  },
  created() {},
  activated() {
    var that = this;
    var caseInfoSession = Helper.getSession('caseInfo');
    var caseId = Helper.getSearchItem('caseid'); 
    if (caseInfoSession && !caseId) {
      that.caseId = caseInfoSession.caseInfo.caseId || 0;
      Bus.$emit("authCaseInfo");
    } else {
      setTimeout(() => {
        caseInfoSession = Helper.getSession('caseInfo');
        that.caseId = caseInfoSession.caseInfo.caseId || 0;
        Bus.$emit("authCaseInfo");
      }, 3000)
    }
  },
  watch: {},
  filters: {}
}
</script>
<style lang="scss">
@import "../../assets/sass/install";
.view-searchstaff{
  .select-list{
    max-height: 64px;
    overflow: auto;
    .select-row {
      cursor: default;
      display: inline-block;
      color: #666;
      line-height: 32px;
      margin-right: 15px;
      padding-right: 10px;
      position: relative;
      &>i{
        position: absolute;
        right: -5px;
        top: 6px;
        cursor: pointer;
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      .del-icon {
        position: absolute;
        right: 0;
        top: 4px;
        display: none;
      }
      &:hover {
        color: #02b0f0;
        .del-icon {
          display: inline-block;
        }
      }
    }
  }
  .icon {
    vertical-align: top;
    text-align: center;
    padding-left: 10px;
    padding-top: 5px;
    color: #999;
    cursor: pointer;
    height: 25px;
    margin-top: -2px;
    margin-left: -10px;
    font-weight: 600;
    &:hover {
      color: #02b0f0;
    }
  }
  .userSelectBox {
    position: relative;
    display: inline-block;
    width: 260px;
    .down {
      width: 260px;
      height: auto;
      max-height: 200px;
      overflow: auto;
      border: none;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
      background-color: #fff;
      @include radius(3px);
      position: absolute;
      z-index: 20;
      top: 34px;
      left: 0;
      .drop-item {
        display: block;
        font-size: 12px;
        padding: 5px 15px;
        color: #666;
        &:hover {
          background-color: #f5f5f5;
        }
        i {
          margin-left: 5px;
          color: #888;
        }
      }
      .item-selected{
        color: rgba(2, 176, 240, 0.9);
        background: #fff;
        padding: 0 16px;
        i{
          color: rgba(2, 176, 240, 0.9);
        }
        &:after{
          display: inline-block;
          font-family: "Ionicons";
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          text-rendering: auto;
          line-height: 1;
          float: right;
          font-size: 24px;
          content: '\F3FD';
          color: rgba(2, 176, 240, 0.9);
        }
      }
    }
  }
}
</style>